<div class="clearfix">
<div class="f-myResume-left">
    <div class="f-myResume-back">
        <img ng-click="goPreview('resume.posted')" style="display: block;  margin-left: 10px;cursor: pointer" src="them/images/compImages/back-to-last.png" alt=""/>
    </div>
    <div class="f-myResume-personInfo">
        <img class="person-pic" ng-src="{{logoUrl}}"  />
        <div class="person-info info-align info-font-size">
            <div><a >更新时间:</a><a style="margin-left:5px;">2016-10-11</a></div>
            <div><a style="float: left;">设为公开:</a><a style="margin-left:5px;">
            	<div class="testswitch" ng-click="clickSwitch()">
		            <input class="testswitch-checkbox" id="onoffswitch" type="checkbox" ng-checked="open">
		            <label class="testswitch-label" for="onoffswitch">  
		                <span class="testswitch-inner" data-on="ON" data-off="OFF"></span>  
		                <span class="testswitch-switch"></span>  
		            </label>  
		        </div>  
            </a></div>
        </div>
        <div class="person-preview align-center info-font-size">
            <a  ng-click="goPreview('resume.myResumePreview',{userId:userLoginInfo.data.userId})">预览</a>
        </div>
   </div>
    <div class="f-myResume-list">
        <ul>
            <li class="clearfix" ng-repeat="item in infoFill" ><img ng-src="{{item.logoSrc}}" alt=""/><a style="margin-left:10px;" ng-bind="item.title"></a>
                <img  ng-show="item.isFill" style="float:right;" ng-src="them/images/resume-filled-pic.png" alt=""/></li>
        </ul>
    </div>
</div>
    <!--基本信息-->
    <div class="f-myResume-center" ng-if="!showBox.basic">

        <div class="show-info-box" >
            <p class="show-info-title clearfix" >
                <a ng-bind="basicInfo.name"></a>
                <img style="float:right;height: 20px;width: 20px;cursor: pointer" ng-click="editBasicInfo()" src="them/images/compImages/edit.png" alt=""/>
            </p>
            <div class="show-info-list clearfix">
                <p class="show-info-list-item ">现居住 <span ng-bind="basicInfo.lregionObject |getPlace"></span></p>
                <p class="show-info-list-item "><span ng-bind="basicInfo.workYear "></span>年工作经验</p>
                <p class="show-info-list-item " ng-bind="basicInfo.sex |reSex"></p>
                <p class="show-info-list-item " ><span ng-bind="basicInfo.birthday |getYear"></span>岁</p>
                <p class="show-info-list-item " style="border-right:0px solid" >目前 <span ng-bind="basicInfo.jobStatus.dictName"></span></p>
            </div>
            <div class="show-info-list clearfix" >
                <div class="show-info-list-l clearfix">
                    <div class="list-item-l">手机:</div>
                    <div class="list-item-r" ng-bind="basicInfo.phone"></div>
                </div>
                <div class="show-info-list-r clearfix">
                    <div class="list-item-l">邮箱:</div>
                    <div class="list-item-r" ng-bind="basicInfo.email"></div>
                </div>
            </div>
            <div class="show-info-list clearfix" >
                <div class="show-info-list-l clearfix">
                    <div class="list-item-l">户口所在地:</div>
                    <div class="list-item-r" ng-bind="basicInfo.htObject |getPlace" ></div>
                </div>
                <div class="show-info-list-r clearfix">
                    <div class="list-item-l">婚姻状态:</div>
                    <div class="list-item-r" ng-bind="basicInfo.maritalStatus | getMarital"></div>
                </div>
            </div>
            <div class="show-info-list clearfix" >
                <div class="show-info-list-l clearfix">
                    <div class="list-item-l">身份证号:</div>
                    <div class="list-item-r" ng-bind="basicInfo.card | getCard"></div>
                </div>
                <div class="show-info-list-r clearfix">
                    <div class="list-item-l">政治面貌:</div>
                    <div class="list-item-r" ng-bind="basicInfo.politicalStatusObjec.dictName"></div>
                </div>
            </div>
            <div class="show-info-list clearfix" >
                <div class="show-info-list-l clearfix" ng-repeat="item in basicInfo.language">
                    <div class="list-item-l">语言{{$index+1}}</div>
                    <div class="list-item-r" ng-bind="item |getLan"></div>
                </div>

            </div>
            <div class="show-info-person-resume">
                <p class="show-info-title" style="color:#00AAFE">个人简介</p>
                <div class="show-info-list" ng-bind="basicInfo.introduction">

                </div>
            </div>
        </div>


</div>
    <!-- 表单验证！-->
    <basic-info ng-if="showBox.basic" conf-data="basicInfo"></basic-info>

    <!--求职意向-->
    <div class="f-myResume-center">
        <div class="f-resume-header clearfix">
            <img  src="them/imag/qiuzhi.png" alt=""/>
            <a >求职意向</a>
            <img style="float:right;height: 20px;width: 20px;cursor: pointer;" ng-click="editJobIntention()" src="them/images/compImages/edit.png" alt=""/>
        </div>
        <div class="show-info-box" ng-if="!showBox.jobIntension">
            <div class="show-info-list clearfix" >
                <div class="show-info-list-l clearfix">
                    <div class="list-item-l">期望薪资:</div>
                    <div class="list-item-r" ng-bind="jobIntention.salary.srName"></div>
                </div>
                <div class="show-info-list-r clearfix">
                    <div class="list-item-l">期望工作地:</div>
                    <div class="list-item-r" ng-bind="jobIntention.jobInRegionIntension | getIntentionRegion"></div>
                </div>
            </div>
            <div class="show-info-list clearfix" >
                <div class="show-info-list-l clearfix">
                    <div class="list-item-l">职能:</div>
                    <div class="list-item-r" ng-bind="jobIntention.jobConf | getJobConf"></div>
                </div>
                <div class="show-info-list-r clearfix">
                    <div class="list-item-l">到岗时间:</div>
                    <div class="list-item-r" ng-bind="jobIntention.jobInArrivalTime | getFullTimeFront"></div>
                </div>
            </div>
            <div class="show-info-list clearfix" >
                <div class="show-info-list-l clearfix">
                    <div class="list-item-l">行业:</div>
                    <div class="list-item-r" ng-bind=" jobIntention.jobInIndustryConf |getIndustry"></div>
                </div>
                <div class="show-info-list-r clearfix">
                    <div class="list-item-l">工作性质:</div>
                    <div class="list-item-r" ng-bind=" jobIntention.jobNature.dictName"></div>
                </div>
            </div>
        </div>
        <job-intension ng-if="showBox.jobIntension" conf-data="jobIntention"></job-intension>
    </div>
    <!--工作经验-->
    <div class="f-myResume-center">
        <div class="f-resume-header clearfix">
            <img  src="them/imag/jobex.png" alt=""/>
            <a >工作经验</a>
            <p ng-show="!isInitAddNew.workExpression" style="float:right;"  ng-click="addNewWorkExpression()"> <img style="height: 14px;width: 14px;" src="them/images/compImages/add-gray.png" alt=""/><span style="margin-left:10px;cursor:pointer">新增工作经验</span> </p>
        </div>
        <div ng-if="!isInitAddNew.workExpression">
            <div class="experience-box"  ng-repeat="item in workExpression">
                <div ng-hide="showWorkexperience.showForm[$index]">
                <div class="experience-box-content" >
                    <div class="experience-box-title clearfix">
                        <div class="experience-box-title-l"><span ng-bind="item.startValue |getTimeFront"></span>-<span ng-bind="item.endValue |getTimeFront"></span></div>
                        <div class="experience-box-title-c">
                            <div><span style="font-weight: bold" ng-bind="item.companyName"></span><span style="color: red;margin-left:25px;"><span ng-bind="item.jobNature.dictName |squareBrackets"></span></span></div>
                            <div class="experience-box-title-c-2 clearfix"><span class="margin-right-10" ng-bind="item.workExpreIndustryConf.dictName"></span> <span class="margin-right-10">|</span><span class="margin-right-10" ng-bind="item.companyScale.dictName"></span> <span class="margin-right-10">|</span><span class="margin-right-10" ng-bind="item.jobDc.dictName"></span></div>
                            <div ><span class="margin-right-10" ng-bind="item.department"></span> <span class="margin-right-10" ng-bind="item.funcd.fdcName"></span> <span class="margin-right-10" style="color: red;" ng-bind="item.salary.srName"></span></div>
                        </div>
                        <div class="experience-box-title-r">
                            <img style="float:left;height: 20px;width: 20px;margin-right: 20px;cursor: pointer" ng-click="editWorkexperience($index)" src="them/images/compImages/edit.png" alt=""/>
                            <img style="float:left;height: 20px;width: 20px;cursor: pointer" ng-click="deleteWorkexperience(item.weId)" src="them/images/compImages/delete-experience.png" alt=""/>
                        </div>
                    </div>
                </div>
                <div class="experience-box-des clearfix">
                    <div class="experience-box-des-title">工作描述:</div>
                    <div class="experience-box-des-content" ng-bind="item.introduction"></div>
                </div>
            </div>
                <work-expression ng-if="showWorkexperience.showForm[$index]" conf-data="item" conf-cvid="item.cvdId" ></work-expression>
            </div>
        </div>
        <work-expression ng-if="isInitAddNew.workExpression" conf-cvid="item.cvdId" ></work-expression>
    </div>
    <!--教育经历-->
    <div class="f-myResume-center">
        <div class="f-resume-header clearfix">
            <img  src="them/imag/eduex.png" alt=""/>
            <a >教育经历</a>
            <p ng-show="!isInitAddNew.educationExpression" style="float:right;"  ng-click="addNewEducationExpression()"> <img style="height: 14px;width: 14px;" src="them/images/compImages/add-gray.png" alt=""/><span style="margin-left:10px;cursor:pointer">新增工作经验</span> </p>

        </div>
        <div ng-if="!isInitAddNew.educationExpression">

            <div class="experience-box"  ng-repeat="item in educationExpression">
                <div ng-hide="showEducationExpression.showForm[$index]">
                    <div class="experience-box-content" >
                        <div class="experience-box-title clearfix">
                            <div class="experience-box-title-l"><span ng-bind="item.startValue |getTimeFront"></span>-<span ng-bind="item.endValue |getTimeFront"></span></div>
                            <div class="experience-box-title-c">
                                <div><span style="font-weight: bold" ng-bind="item.school"></span><span style="color: red;margin-left:25px;"><span ng-bind="item.overseas | getOverseas"></span></span></div>
                                <div class="experience-box-title-c-2 clearfix"><span class="margin-right-10"  >{{item.dc.dictName}}</span> <span class="margin-right-10" ng-bind="item.majorConf.pdcName"></span> </div>
                            </div>
                            <div class="experience-box-title-r">
                                <img style="float:left;height: 20px;width: 20px;margin-right: 20px;cursor: pointer" ng-click="editEducationExpression($index)" src="them/images/compImages/edit.png" alt=""/>
                                <img style="float:left;height: 20px;width: 20px;cursor: pointer" ng-click="deleteEducationExpression(item.eeId)" src="them/images/compImages/delete-experience.png" alt=""/>
                            </div>
                        </div>
                    </div>
                    <div class="experience-box-des clearfix">
                        <div class="experience-box-des-title">工作描述:</div>
                        <div class="experience-box-des-content" ng-bind="item.introduction"></div>
                    </div>
                </div>
                <education-expression ng-if="showEducationExpression.showForm[$index]" conf-data="item" conf-cvid="item.cvdId" ></education-expression>
            </div>
        </div>
        <education-expression  ng-if="isInitAddNew.educationExpression"></education-expression>
    </div>
    <!--项目经验-->
    <div class="f-myResume-center">
        <div class="f-resume-header clearfix">
            <img  src="them/imag/projectex.png" alt=""/>
            <a >项目经验</a>
            <p ng-show="!isInitAddNew.projectExpression" style="float:right;"  ng-click="addNewProjectExpression()"> <img style="height: 14px;width: 14px;" src="them/images/compImages/add-gray.png" alt=""/><span style="margin-left:10px;cursor:pointer">新增项目经验</span> </p>
        </div>
        <div ng-if="!isInitAddNew.projectExpression">

            <div class="experience-box"  ng-repeat="item in projectExpression">
                <div ng-hide="showProjectExpression.showForm[$index]">
                    <div class="experience-box-content" >
                        <div class="experience-box-title clearfix">
                            <div class="experience-box-title-l"><span ng-bind="item.startValue |getTimeFront"></span>-<span ng-bind="item.endValue |getTimeFront"></span></div>
                            <div class="experience-box-title-c">
                                <div><span style="font-weight: bold" ng-bind="item.peName"></span></div>
                                <div class="experience-box-title-c-2 clearfix"><span class="margin-right-10"  ng-bind="item.companyName"></span> <span class="margin-right-10" ng-bind="item.roleName"></span> </div>
                            </div>
                            <div class="experience-box-title-r">
                                <img style="float:left;height: 20px;width: 20px;margin-right: 20px;cursor: pointer" ng-click="editProjectExpression($index)" src="them/images/compImages/edit.png" alt=""/>
                                <img style="float:left;height: 20px;width: 20px;cursor: pointer" ng-click="deleteProjectExpression(item.peId)" src="them/images/compImages/delete-experience.png" alt=""/>
                            </div>
                        </div>
                    </div>
                    <div class="experience-box-des clearfix">
                        <div class="experience-box-des-title">工作描述:</div>
                        <div class="experience-box-des-content" ng-bind="item.introduction"></div>
                    </div>
                </div>
                <project-expression ng-if="showProjectExpression.showForm[$index]" conf-data="item" conf-cvid="item.cvdId" ></project-expression>
            </div>
        </div>

        <project-expression  ng-if="isInitAddNew.projectExpression"></project-expression>
    </div>
    <div class="f-myResume-center" style="position:relative">
        <div class="f-resume-header clearfix">
            <img  src="them/imag/stationblog.png" alt=""/>
            <a >站内作品</a>
            <p  style="float:right;"  ng-click="updateStationWorks()"> <img style="height: 14px;width: 14px;" src="them/images/compImages/add-gray.png" alt=""/><span style="margin-left:10px;cursor:pointer">新增博文</span> </p>
        </div>
        <div ng-if="isAddNewBlog">
        <div class="fix-background"></div>
        <div class="addNewBlog">
            <div class="addNewBlog-title">
                <span>新增博文</span>
                <img src="them/images/compImages/delete-black.png" ng-click="hideAddNewBlog()" alt=""/>
            </div>
            <div class="addNewBlog-content">
                <div class="addNewBlog-content-list clearfix" ng-repeat="item in newBlogList track by $index">
                    <input type="checkbox" class="input-ckeckbox" ng-checked="item.type == 2" ng-click="checkCheckBox($event,item)"/>
                    <a class="text-overflow">{{item.title}}</a>
                </div>
            </div>
            <div class="addNewBlog-ben">
                <a class="addNewBlog-ben-cancel" ng-click="cancelAddNewBlog()">取消</a>
                <a class="addNewBlog-ben-save" style="background: #30A3FE; color: #fff;" ng-click="saveAddNewBlog()">保存</a>
            </div>
            
        </div>
        </div>
        <div class="experience-box">
            <div class="f-myResume-blog-item" ng-repeat="item in blogList track by $index">
                <div class="f-myResume-blog-item-up clearfix" style="" >
                <div style="float:left;cursor: pointer;" ng-click="goBlogXq(item)" ng-bind="item.title" ></div>
                    <div style="float:left;margin-left: 30px; color: red;"><img src="them/imag/temp.jpg" alt=""/> <span style="margin-left: 5px;float:right">{{item.browseCount}}</span></div>
                </div>
                <div class="f-myResume-blog-item-down clearfix" style="font-size: 12px;">
                    <a >{{item.createTime | mm2YMD}}</a>
                    <a style="margin-left:15px;" ><span>专业分类：</span> {{item.secondaryCategory.scName}}</a>
                    <a style="margin-left:15px;" ><span>评论：</span>( {{item.commentCount}} )</a>
                </div>
            </div>
        </div>

    </div>
</div>
</div>

<style>
    .f-myResume-blog-item-down a:hover{
        cursor:default;
    }
    .f-myResume-blog-item{
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #ddd;
    }
    .addNewBlog {
        position: absolute;
        left: 200px;
        top: -50px;
        border: 1px solid #ddd;
        width: 420px;
        height: 387px;
        background: #fff;
    }
    .addNewBlog-title{
        font-size: 18px;
        font-weight: bold;
        text-align: left;
        background: #F5F5F3;
        height: 30px;
        padding-top: 15px;
        padding-left: 15px;
        padding-right: 15px;
        border-bottom: 1px solid #ddd;
    }
    .addNewBlog-title img {
        float:right;
    }
    .addNewBlog-content{
        height: 245px;
        padding: 20px;
        overflow: auto;
        border-bottom: 1px solid #ddd;
    }
    .addNewBlog-content-list{
        height: 40px;
    }
    .addNewBlog-content-list  input ,.addNewBlog-content-list a{
        float: left;
        height: 20px;
    }
    .addNewBlog-content-list a{
        display: block;
        margin-left: 10px;
        height: 20px;
        max-width: 340px;
    }
    .addNewBlog-ben{
        height: 30px;
        width: 100%;
        padding-top: 20px;
    }
    .addNewBlog-ben a{
        float: right;
        width: 50px;
        height: 25px;
        line-height: 25px;
        border: 1px solid #ddd;
        text-align: center;
        margin-right: 20px;
    }
    .fix-background{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.1;
    }

    /*********非表单输入 显示区域样式设定 start************/
    .f-resume-header{
        margin-bottom: 30px;
        font-size: 14px;
        line-height: 30px;
    }
    .show-info-box{
        width: 100%;
    }
    .show-info-title{
        height:50px;
        width:100%;
        line-height: 50px;
        font-size:18px;
        font-weight: bold;
    }
    .show-info-list{
        min-height:30px;
        width:100%;
        font-size:14px;
    }
    .show-info-list-item{
        float: left;
        padding-right: 5px;
        border-right: 1px solid #ddd;
        margin-right: 10px;
        height: 20px;
        line-height: 20px;
    }

    .show-info-list-l,.show-info-list-r {
        float:left;
        width: 40%;
        min-height: 30px;
        line-height: 30px;
    }
    .list-item-l{
        float:left;
        width:30%;
    }
    .list-item-r{
        float:left;
        width: 60%;
    }

     .experience-box{
        width:100%;
         font-size: 14px;
         line-height: 30px;
         text-align: left;
     }
     .experience-box-content{
         width:100%;
     }
     .experience-box-title-l, .experience-box-title-c {
         float:left;
     }
    .experience-box-title-r{
        float: right;
     }
     .experience-box-title-l{
         width:160px;
         text-align: left;
     }
     .experience-box-title-c{
         width: 60%;
         height: 90px;
     }
     .experience-box-title-r{
         width: 100px;
     }
     .experience-box-des{
         width: 100%;
     }
     .experience-box-des .experience-box-des-title{
         width: 70px;
         float: left;
     }
    .experience-box-des .experience-box-des-content{
        width: 770px;float:left;
    }
    .margin-right-10{
        margin-right: 10px;
    }
    /*********非表单输入 显示区域样式设定 end************/
    input{
        padding-left: 5px;
    }

    <!--  /*校验提示信息样式设定*/-->
    .validat-message-box>p{
            color: red;
            margin-left: 110px;
            margin-top: 10px;
        }
    .btn-container {
        width: 200px;
        height:30px;
        margin:0 auto;
    }
    .btn-container>a{
        display: block;
        float:left;
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #ddd;
    }
    .query-btn{
        color:#fff;
        margin-right:30px;
        background:#00AAFE;
    }
    .calendar-curser{
        position: absolute;
        top: 0px;
        left: 280px;
        width: 20px;
        cursor: pointer;
        height: 30px;
    }
    .calendar-style{
        width: 330px;
        /*height: 184px;*/
        position: absolute;
        top: 30px;
        left: 100px;
        z-index:4;
        border: 2px solid #ddd;
        /*padding-top: 20px;*/
        border-radius: 5px;
        background: #fff;
    }
    .f-myResume-left{
        float: left;
        width: 278px;
        padding-top: 5px;
        background:#fff;
        border: 1px solid #ddd;
    }
    .f-myResume-back{
        height: 30px;
    }
    .f-myResume-center{
        float: right;
        width: 848px;
        /*min-height: 300px;*/
        margin-left: 10px;
        margin-bottom:15px;
        padding:35px 30px 20px 30px;
        background:#fff;
        border: 1px solid #ddd;
    }
    /*左侧信息栏*/
    .person-pic{
        margin:0 auto;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        display: block;
    }
    .person-info{
        margin-top:35px;
    }
    .person-preview a{
        display: block;
        width: 80px;
        border: 1px solid #00AAFE;
        border-radius: 2px;
        height: 25px;
        line-height: 25px;
        margin: 0 auto;
    }
    .align-center{
        text-align: center;
    }
    .info-align{
        margin-left:60px;
    }
    .info-font-size,.person-info a{
        font-size:14px;
        line-height:30px;
        color:#000;
    }
    .f-myResume-list{
        margin-top:40px;
    }
    .f-myResume-list ul{
        width:100%;
    }
    .f-myResume-list ul li{
        width: 230px;
        height: 50px;
        padding-left: 15px;
        margin: 0 auto;
    }
    .f-myResume-list ul li a{
        text-decoration: none;
        color: #666460;
        cursor: pointer;
        font-size: 14px;
        line-height: 20px;
    }
    .f-myResume-list ul li a,.f-myResume-list ul li img{
        float: left;
        display: inline-block;
    }
    .float-right{
        float:right;
    }

    /*cener 样式设定*/
    .f-resume-header a{
        float:left;
        margin-left:20px;
        display: block;
        font-size:20px ;
        line-height:30px;
        color:#00AAFE;
    }
    .f-resume-header img{
        float: left;
        margin-top: 8px;
        display: block;
        cursor: pointer;
    }

    /*表单验证 样式设定*/
    .basic-info-form{
        width:100%;
        margin-bottom:20px;
    }
    .basic-info-container{
        margin-top:35px;
        width:100%;
    }
    .basic-info-form-list{
        float:left;
        color:#B1ADA7;
        width:50%;
        min-height:35px;
    }
    .basic-info-form-list input[type="text"],.basic-info-form-list input[type="number"]{
        border:1px solid #E2E0DB;
        display: inline-block;
        height:30px;
        width:185px;
        padding-right: 15px;
    }
    .basic-info-form-list>label{
        width:100px;
        display: inline-block;
        text-align: left;
        line-height: 30px;
    }
    .input-required{
        color:red;
        margin-right:5px;
    }
    input[type="radio"] {
        margin: 3px 3px 0px 5px;
    }

    /*输入框背景*/

    .background-date {
        background:url("them/images/resume-baseInfo-date-logo.png") 180px 6px no-repeat;
    }
    .background-city {
        background:url("them/images/resume-baseInfo-city-logo.png") 180px 6px no-repeat;
    }
    .basic-info-form-list-full{

    }
    .list-full-label{
        display: block;
        float: left;
        width: 100px;
        color:#B1ADA7;
    }
    /*.textarea-box{*/
        /*position: relative;*/
        /*border: 0px solid #E2E0DB;*/
        /*float:left;*/
        /*width:745px;*/
        /*height:150px;*/
    /*}*/
    /*.textarea{*/
        /*border: 1px solid #E2E0DB;*/
        /*float:left;*/
        /*width:745px;*/
        /*height:150px;*/
        /*resize: none;*/
    /*}*/
    /*.textarea-notice{*/
        /*position: absolute;*/
        /*top:130px;*/
        /*left:700px;*/
    /*}*/
    /*日历输入框背景图片*/
    .background-date2 {
        background: url(them/images/resume-baseInfo-date-logo.png) 74px 6px no-repeat;
    }
	
	
	
	.testswitch {  
    position: relative;  
    float: left;   
    width: 40px;  
    margin: 0;  
    -webkit-user-select:none;   
    -moz-user-select:none;   
    -ms-user-select: none;  
}  
  
.testswitch-checkbox {  
    display: none;  
}  
  
.testswitch-label {  
    display: block;   
    overflow: hidden;   
    cursor: pointer;  
    border: 2px solid #999999;   
    border-radius: 20px;  
}  
  
.testswitch-inner {  
    display: block;   
    width: 200%;   
    margin-left: -100%;  
    transition: margin 0.3s ease-in 0s;  
}  
  
.testswitch-inner::before, .testswitch-inner::after {  
    display: block;   
    float: right;   
    width: 50%;   
    height: 18px;   
    padding: 0;   
    line-height: 18px;  
    font-size: 5px;   
    color: white;   
    font-family:   
    Trebuchet, Arial, sans-serif;   
    font-weight: bold;  
    box-sizing: border-box;  
}  
  
.testswitch-inner::after {  
    content: attr(data-on);  
    padding-left: 5px;
    background-color: #00e500;   
    color: #FFFFFF;  
}  
  
.testswitch-inner::before {  
    content: attr(data-off);  
    padding-right: 2px;
    background-color: #EEEEEE;   
    color: #999999;  
    text-align: right;  
}  
  
.testswitch-switch {  
    position: absolute;   
    display: block;   
    width: 10px;  
    height: 10px;  
    margin: 4px 2px 4px 0;
    background: #FFFFFF;  
    top: 0;   
    bottom: 0;  
    right: 22px;
    border: 2px solid #999999;   
    border-radius: 20px;  
    transition: all 0.3s ease-in 0s;  
}  
  
.testswitch-checkbox:checked + .testswitch-label .testswitch-inner {  
    margin-left: 0;  
}  
  
.testswitch-checkbox:checked + .testswitch-label .testswitch-switch {  
    right: 0px;   
}  
</style>